<template>
  <form class="home">
    <section class="main-body">
      <div id="bannerWarp">
        <div class="banner">
          <ul class="slides">
            <li class="flex-active-slide"
              style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
              <img src="https://kancha-1258911605.cos.ap-guangzhou.myqcloud.com/front/080210011900x500.jpg"
                draggable="false">
              <div class="col-md-12" id="intro-main1">
                <h1>
                  <span color="">
                  </span>
                </h1>
                <h2>
                </h2>
                <h2>
                </h2>
                <div class="btn-banner-group">
                  <a target="_blank" title="&lt;span color=&quot;&quot;&gt;&lt;/span&gt;"
                    class="btn btn-default btn-focus btn-white">查看详情</a>
                </div>
              </div>
            </li>
          </ul>
          <ol class="flex-control-nav flex-control-paging">
          </ol>
          <ul class="flex-direction-nav">
            <li>
              <a class="flex-prev flex-disabled" tabindex="-1">Previous</a>
            </li>
            <li>
              <a class="flex-next flex-disabled" tabindex="-1">Next</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="container sc-news">
  	  <div class="sc-tit">热点关注：</div>
  	  <marquee class="sc-box" scrollamount="3" behaviour="Scroll" direction="Left">
        <span v-for="index of 8">
          <a target="_blank">{{index}}关于做好申报中设协2021年度全国勘察设计行业奖（工业奖）的通知</a>
        </span>
  	  </marquee>
  	</div> -->
      <div id="newsWrap">
        <div class="container news-posts news-top">
          <div class="col-sm-6">
            <div class="news-title">
              <div class="title-text">
                <h2>通知公告</h2>
                <a class="more" href="/news">更多&gt;&gt;</a>
              </div>
            </div>
            <ul>
              <li class="top" v-if="tongzhi[0]">
                <a class="current" :href="'/newsview?type=1&id=' + tongzhi[0].id"
                  :title="tongzhi[0].title">{{ tongzhi[0].title }}</a>
                <span>{{ tongzhi[0].contentTxt.substring(0, 100) }}</span>
              </li>
              <li v-for="index of 8" v-if="tongzhi[index]">
                <a :href="'/newsview?type=1&id=' + tongzhi[index].id" :title="tongzhi[index].title">
                  <i>{{ index }}</i>{{ tongzhi[index].title }}</a>
                <span>{{ tongzhi[index].createdTime.substring(0, 10) }}</span>
              </li>
            </ul>
          </div>
          <div class="col-sm-6">
            <div class="news-title">
              <div class="title-text">
                <h2>协会新闻</h2>
                <a class="more" href="/news2?type2=协会新闻">更多&gt;&gt;</a>
              </div>
            </div>
            <div class="news_top">
              <ul class="xhnewspic">
                <li class="slide" v-for="index of 2" v-if="xinwen[index - 1]">
                  <a :href="'/newsview?type=1&id=' + xinwen[index - 1].id">
                    <img :src="xinwen[index - 1].img">
                    <p>{{ xinwen[index - 1].title }}</p>
                  </a>
                </li>
              </ul>
            </div>
            <ul class="xhnews">
              <li v-for="index of 6" v-if="xinwen[index + 1]">
                <a class="" :href="'/newsview?type=1&id=' + xinwen[index + 1].id"
                  :title="xinwen[index + 1].title">{{ xinwen[index + 1].title }}</a>
                <span>{{ xinwen[index + 1].createdTime.substring(0, 10) }}</span>
              </li>
            </ul>
          </div>
          <div class="col-sm-6">
            <div class="news-title">
              <div class="title-text">
                <h2>党建工作</h2>
                <a class="more" href="/news3">更多&gt;&gt;</a>
              </div>
            </div>
            <ul>
              <div class="news_top">
                <ul class="xhnewspic">
                  <li class="slide" v-for="index of 2" v-if="dangjian[index]">
                    <a :href="'/newsview?type=1&id=' + dangjian[index].id">
                      <img :src="dangjian[index].img">
                      <p>{{ dangjian[index].title }}</p>
                    </a>
                  </li>
                </ul>
              </div>
              <ul class="xhnews">
                <li v-for="index of 6" v-if="dangjian[index + 1]">
                  <a class="" :href="'/newsview?type=1&id=' + dangjian[index + 1].id"
                    :title="dangjian[index + 1].title">{{ dangjian[index + 1].title }}</a>
                  <span>{{ dangjian[index + 1].createdTime.substring(0, 10) }}</span>
                </li>
              </ul>
            </ul>
          </div>
        </div>
      </div>

      <div id="activeWrap">
        <div class="container news-posts">
          <div class="col-sm-6" id="sanshi">
            <div class="news-title">
              <div class="title-text">
                <h2>行业动态</h2>
                <a class="more" href="/news2?type2=行业动态">更多&gt;&gt;</a>
              </div>
            </div>
            <ul>
              <li class="top" v-for="index of 1" v-if="dongtai[index - 1]">
                <img :src="dongtai[index - 1].img">
                <a :href="'/newsview?type=1&id=' + dongtai[index - 1].id" :title="dongtai[index].title">
                  {{ dongtai[index - 1].title }}
                  <p>{{ dongtai[index - 1].createdTime.substring(0, 10) }}</p>
                  <p>{{ dongtai[index - 1].contentTxt.substring(0, 30) }}</p>
                </a>
              </li>
              <li v-for="index of 7" v-if="dongtai[index]">
                <a class="" :href="'/newsview?type=1&id=' + dongtai[index].id"
                  :title="dongtai[index].title">{{ dongtai[index].title }}</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-6" id="jishu">
            <div class="news-title">
              <div class="title-text">
                <h2>协会期刊</h2>
                <a class="more" href="/news2?type2=协会期刊">更多&gt;&gt;</a>
              </div>
            </div>
            <ul>
              <li class="top" v-if="qikan[0]">
                <img :src="qikan[0].img">
                <a :href="'/newsview?type=1&id=' + qikan[0].id" :title="dongtai[0].title">
                  {{ qikan[0].title }}
                  <p>{{ qikan[0].createdTime.substring(0, 10) }}</p>
                  <p>{{ qikan[0].contentTxt.substring(0, 30) }}</p>
                </a>
              </li>
              <li v-for="index of 7" v-if="qikan[index]">
                <a class="" :href="'/newsview?type=1&id=' + qikan[index].id"
                  :title="qikan[index].title">{{ qikan[index].title }}</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-6">
            <div class="news-title">
              <div class="title-text">
                <h2>协会会员</h2>
                <a class="more" href="/news7">更多&gt;&gt;</a>
              </div>
            </div>
            <ul class="cat" id="memberlist">
              <li @click="branch('HUI')" :class="branchName == 'HUI' ? 'current' : ''">会长单位
                <i></i>
              </li>
              <li @click="branch('FUHUI')" :class="branchName == 'FUHUI' ? 'current' : ''">副会长单位
                <i></i>
              </li>
              <li @click="branch('CWLISHI')" :class="branchName == 'CWLISHI' ? 'current' : ''">常务理事单位
                <i></i>
              </li>
              <li @click="branch('JIANSHI')" :class="branchName == 'JIANSHI' ? 'current' : ''">监事单位
                <i></i>
              </li>
              <li @click="branch('LISHI')" :class="branchName == 'LISHI' ? 'current' : ''">理事单位
                <i></i>
              </li>
              <li @click="branch('HUIYUAN')" :class="branchName == 'HUIYUAN' ? 'current' : ''">会员单位
                <i></i>
              </li>
              <li @click="branch('BRANCH')" :class="branchName == 'BRANCH' ? 'current' : ''">分支机构
                <i></i>
              </li>
            </ul>
            <ul class="cat-list" id="m">
              <li v-for="item in branchData[branchName]">
                <a>{{ item.name }}</a>
              </li>
            </ul>
            <!-- <a class="news-btn" href="http://www.gdkcsj.com/about_4.html">
          <i class="iconfont icon-nav">
          </i>入会指南
          <span class="iconfont icon-right"></span>
  		  </a>
  		  <a class="news-btn" href="http://www.gdkcsj.com/branch_1588.html">
          <i class="iconfont icon-ziliaoguanli">
          </i>分支机构申请
          <span class="iconfont icon-right"></span>
  		  </a> -->
          </div>
        </div>
      </div>
      <div id="linkWarp">
        <div class="link-header">
          <div class="container">
            <h3>友情链接</h3>
          </div>
        </div>
        <div class="linkDetail">
          <div class="container">
            <div style="float:left;display:block;width:100%;height:15px;">
            </div>
            <div class="link-list">
              <ul class="col-sm-12">
                <a target="_blank" title="住建部" href="http://www.mohurd.gov.cn/">住建部</a>|
                <a target="_blank" title="广东建设信息网" href="http://www.gdcic.net/GdcicIms/">广东建设信息网</a>|
                <a target="_blank" title="中国勘察设计协会" href="http://www.chinaeda.org.cn/">中国勘察设计协会</a>|
                <a target="_blank" title="广东省住房和城乡建设厅" href="http://zfcxjst.gd.gov.cn/">广东省住房和城乡建设厅</a>|
                <a target="_blank" title="深圳勘察设计" href="http://www.szjs.com.cn/">深圳勘察设计</a>|
                <a target="_blank" title="广东造价" href="http://www.gdcost.com/">广东造价</a>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>


  </form>
</template>

<script>
import { enums } from "@/utils";
import Data from '@/api/data'

export default {
  name: 'Index',
  props: {
    layout: String
  },
  data() {
    return {
      tongzhi: [],
      dangjian: [],
      dongtai: [],
      xinwen: [],
      qikan: [],
      listQuery: {
        page: 1,
        status: "NORMAL",
      },

      branchName: "HUI",
      branchData: {},

    }
  },
  watch: {
  },
  computed: {
  },
  created() {
    this.fetchList({
      ...this.listQuery,
      type1: "通知公告", size: 9
    }, "tongzhi")
    this.fetchList({
      ...this.listQuery,
      type1: "党建工作", size: 8
    }, "dangjian")
    this.fetchList({
      ...this.listQuery,
      type: "行业动态", type2: "协会新闻", size: 8
    }, "xinwen")
    this.fetchList({
      ...this.listQuery,
      type: "行业动态", type2: "协会期刊", size: 8
    }, "qikan")
    this.fetchList({
      ...this.listQuery,
      type: "行业动态", type2: "行业动态", size: 8
    }, "dongtai")

    this.branch(this.branchName)
    console.log(this.$data)
  },
  methods: {
    branch(name) {
      this.branchName = name
      if (!this.branchData[this.branchName]) {
        Data.get("/branch", { type: this.branchName }).then(res => {
          if (res) {
            this.$set(this.branchData, this.branchName, res.list)
          }
          console.log(this.branchData)
        })
      }
    },
    fetchList(data, key) {
      var _this = this;
      console.log("请求参数", data)
      Data.get("/article", data).then(res => {
        if (res) {
          _this.$set(_this, key, res.list)
        }
        console.log("11", this.$data)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/new_files/bootstrap.min.css";
@import "~@/styles/new_files/iconfont.css";
@import "~@/styles/new_files/comm.css";
@import "~@/styles/new_files/index.css";
</style>
